<template>
  <el-dialog
    :visible.sync="isShow"
    :title="mode === 'add' ? '新增部门' : '编辑部门'"
    width="500"
    @close="closeEvent"
  >
    <el-form label-width="120px" :model="form" :rules="rules" ref="form">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select @focus="focusData" v-model="form.manager">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align:center">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// 导入获取员工简易列表api和新增部门api和修改部门api
import {
  sysUserSsimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments.js'
export default {
  name: 'dialogItem',
  props: {
    listInfo: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      mode: '', // 通过一个变量,来接受树形组件的传来过的值,从而判断到底是新增还是修改
      item: '', // 用来存储tree组件传递过来的当前点击项的数据
      isShow: false,
      userList: [],
      form: {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 2,
            max: 10,
            message: '请输入2-10位字符长度的部门名称',
            trigger: 'change'
          },
          {
            // 对部门名称进行局部验证
            validator: (rule, value, callback) => {
              // 新增
              let temp = ''
              if (this.mode === 'add') {
                // 如果完整数据中的项中的pid等于当前点击项的id,那么筛选出来的就是当前点击项的子集
                temp = this.listInfo.filter(item => {
                  // console.log(item)
                  return item.pid === this.item.id
                })
              } else {
                // 编辑
                // 如果完整数据中的pid===当前项的pid,那么就可以筛选出同级目录,并排除自己,因为当前项的名字可能不改
                temp = this.listInfo.filter(item => {
                  return item.pid === this.item.pid && item.id !== this.item.id
                })
              }
              // 在筛选出的目录中的name和输入的name进行对比
              const result = temp.some(item => {
                return item.name === value.trim()
              })
              result
                ? callback(new Error('请不要输入重复部门:' + value))
                : callback()
            },
            trigger: 'change'
          }
        ], //	string	非必须		部门名称
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              let result = ''
              if (this.mode === 'add') {
                // 新增
                // 将当前输入的code和完整数据中每一项进行对比,有一项匹配到了就返回ture
                result = this.listInfo.some(item => {
                  return item.code === value.trim()
                })
              } else {
                // 编辑
                result = this.listInfo.some(item => {
                  return item.code === value.trim() && item.id !== this.item.id
                })
              }
              result
                ? callback(new Error('请不要输入重复code:' + value))
                : callback()
            },
            trigger: 'change'
          },
          {
            min: 3,
            max: 10,
            message: '请输入3-10位字符长度的部门名称',
            trigger: 'change'
          }
        ], //	string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }], //	string	非必须		负责人名称
        introduce: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 2,
            max: 50,
            message: '请输入2-50位字符长度的部门介绍',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 弹框关闭时的回调
    closeEvent () {
      this.form = {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	st,ring	非必须		父级部门ID
      }
      this.$refs.form.resetFields()
    },
    // select获取焦点事件,获取员工建议列表
    async focusData () {
      // 调用接口前判断user List是否有值,节省资源
      if (this.userList.length === 0) {
        const res = await sysUserSsimple()
        this.userList = res.data
      }
    },
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode === 'add') {
            // 调用新增部门接口
            // 将form中的pid进行赋值,因为接口需要传过去的pid等于父级部门的id
            this.form.pid = this.item.id
            await companyDepartmentPost(this.form)
            // 提示
            this.$message.success('添加成功')
            // 关闭弹窗
            this.isShow = false
            // 刷新列表
            this.$emit('getDate')
          } else {
            // 调用修改接口
            await companyDepartmentPut(this.form)
            // 提示
            this.$message.success('添加成功')
            // 关闭弹窗
            this.isShow = false
            // 刷新列表
            this.$emit('getDate')
          }
        }
      })
    }
  },
  mounted () {
    // 使用bus兄弟传值接收传送过来的值
    // 监听
    this.$bus.$on('show', (bol, item, mode) => {
      this.isShow = bol
      // 将兄弟组件传递过来的当前点击项的数据存储
      this.item = item

      // 用于标题判断是新增还是编辑
      this.mode = mode
      // 如果点击的是edit编辑,就当前数据回显,对form进行赋值,赋值的同时要对数据进行深拷贝,以免受到引用值特性的影响
      if (mode === 'edit') {
        // 先使用JSON.stringify将item转为字符,就成了基本值,再使用JSON.parse就成为了一份新的引用值
        this.form = JSON.parse(JSON.stringify(item))
      }
    })
  },
  beforeDestroy () {
    // 销毁bus传值
    this.$bus.$off('show')
  }
}
</script>

<style></style>
